<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Responder testing</title>
	<!--[if lte IE 8]>
	<link href="/css/style-old-ie.css" rel="stylesheet">
	<![endif]-->
	<!--[if gt IE 8]><!-->
	<link href="/css/style.css" rel="stylesheet">
	<!--<![endif]-->
</head>
<body>
	<div class="wrapper">

		<header>
			<h1>Responder mixin testing</h1>
		</header>

		<h2>Test breakpoints</h2>
		<ul>
			<li>mobile-portrait 320px</li>
			<li>mobile-landscape 480px</li>
			<li>tablet-portrait 600px</li>
			<li>tablet-landscape 768px</li>
			<li>desktop 992px</li>
		</ul>

		<h2>Support for old-IE</h2>
		<pre><code>$old-ie-breakpoint: tablet-portrait</code></pre>

		<h2>Respond-to mixin</h2>
		<p>Resize your browser!</p>

		<h3>Only</h3>
		<table class="mq-mixins-test">
			<thead>
				<tr>
					<th>Mixin</th>
					<th>Response</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><code class="language-css">respond-to(mobile-only)</code></td>
					<td class="response-example respond-to-mobile-only"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(mobile-portrait-only)</code></td>
					<td class="response-example respond-to-mobile-portrait-only"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(mobile-landscape-only)</code></td>
					<td class="response-example respond-to-mobile-landscape-only"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(tablet-only)</code></td>
					<td class="response-example respond-to-tablet-only"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(tablet-portrait-only)</code></td>
					<td class="response-example respond-to-tablet-portrait-only"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(tablet-landscape-only)</code></td>
					<td class="response-example respond-to-tablet-landscape-only"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(desktop-only)</code></td>
					<td class="response-example respond-to-desktop-only"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
			</tbody>
		</table>

		<hr>

		<h3>And-Up</h3>
		<table class="mq-mixins-test">
			<thead>
				<tr>
					<th>Mixin</th>
					<th>Response</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><code class="language-css">respond-to(mobile-and-up)</code></td>
					<td class="response-example respond-to-mobile-and-up"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(mobile-portrait-and-up)</code></td>
					<td class="response-example respond-to-mobile-portrait-and-up"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(mobile-landscape-and-up)</code></td>
					<td class="response-example respond-to-mobile-landscape-and-up"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(tablet-and-up)</code></td>
					<td class="response-example respond-to-tablet-and-up"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(tablet-portrait-and-up)</code></td>
					<td class="response-example respond-to-tablet-portrait-and-up"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(tablet-landscape-and-up)</code></td>
					<td class="response-example respond-to-tablet-landscape-and-up"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(desktop-and-up)</code></td>
					<td class="response-example respond-to-desktop-and-up"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
			</tbody>
		</table>

		<hr>

		<h3>And-Below</h3>
		<table class="mq-mixins-test">
			<thead>
				<tr>
					<th>Mixin</th>
					<th>Response</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><code class="language-css">respond-to(mobile-and-below)</code></td>
					<td class="response-example respond-to-mobile-and-below"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(mobile-portrait-and-below)</code></td>
					<td class="response-example respond-to-mobile-portrait-and-below"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(mobile-landscape-and-below)</code></td>
					<td class="response-example respond-to-mobile-landscape-and-below"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(tablet-and-below)</code></td>
					<td class="response-example respond-to-tablet-and-below"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(tablet-portrait-and-below)</code></td>
					<td class="response-example respond-to-tablet-portrait-and-below"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(tablet-landscape-and-below)</code></td>
					<td class="response-example respond-to-tablet-landscape-and-below"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
				<tr>
					<td><code class="language-css">respond-to(desktop-and-below)</code></td>
					<td class="response-example respond-to-desktop-and-below"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
			</tbody>
		</table>

		<hr>

		<h3>Retina displays</h3>

		<table class="mq-mixins-test">
			<thead>
				<tr>
					<th>Mixin</th>
					<th>Response</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><code class="language-css">respond-to(retina)</code></td>
					<td class="response-example respond-to-retina"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
			</tbody>
		</table>

		<hr>

		<h3>Old IE</h3>

		<table class="mq-mixins-test">
			<thead>
				<tr>
					<th>Mixin</th>
					<th>Response</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><code class="language-css">respond-to(ie)</code></td>
					<td class="response-example respond-to-ie"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
				</tr>
			</tbody>
		</table>

	</div> <!-- /wrapper -->

</body>